<template>
   <section><canvas id="canvas" width="1575" height="1337" @mousemove="dotsMousemove" @mouseleave="dotsMouseleave"></canvas></section>
</template>

<script>
  import $ from 'jquery'
  export default{
    data(){
      return{
        canvas: null,
        ctx: null,
        dotsArray: [],
        dotsNb: 100,
        dotsDistance: 100,
        dotsRadius: 150,
        mousePosition:{}
      }
    },

    methods:{
      createDots(num){

        for( let i = 0; i < num; i++){
          let obj = {
            x: Math.random() * this.canvas.width,
            y: Math.random() * this.canvas.height,
            vx: -0.5 + Math.random(),
            vy: -0.5 + Math.random(),
            radius: Math.random() * 2,
            color: this.setColor()
          }
          this.dotsArray.push(obj);
        }
      },
      animateDots(){
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.moveDots();
        this.connectDots();
        this.drawDots();
        requestAnimationFrame(this.animateDots);
      },
      moveDots() {
        for( let i = 0; i < this.dotsNb; i++){

          var dot = this.dotsArray[i];

          if(dot.y < 0 || dot.y > this.canvas.height){
            dot.vx = dot.vx;
            dot.vy = - dot.vy;
          }
          else if(dot.x < 0 || dot.x > this.canvas.width){
            dot.vx = - dot.vx;
            dot.vy = dot.vy;
          }
          dot.x += dot.vx;
          dot.y += dot.vy;
        }
      },
      drawDots() {
        for(let i = 0; i < this.dotsNb; i++){
          this.drawCircle(this.dotsArray[i])
        }
      },
      drawCircle(obj){
        this.ctx.beginPath();

        this.ctx.arc(obj.x, obj.y, obj.radius, 0, Math.PI, false);
        // this.ctx.closePath();
        this.ctx.fillStyle = obj.color.style;
        this.ctx.fill();
      },
      connectDots() {
        for(let i = 0; i < this.dotsNb; i++){
          for(let j = 0; j < this.dotsNb; j++){
            let i_dot = this.dotsArray[i];
            let j_dot = this.dotsArray[j];
            if((i_dot.x - j_dot.x) < this.dotsDistance && (i_dot.y - j_dot.y) < this.dotsDistance && (i_dot.x - j_dot.x) > - this.dotsDistance && (i_dot.y - j_dot.y) > - this.dotsDistance){
              if((i_dot.x - this.mousePosition.x) < this.dotsRadius && (i_dot.y - this.mousePosition.y) < this.dotsRadius && (i_dot.x - this.mousePosition.x) > - this.dotsRadius && (i_dot.y - this.mousePosition.y) > - this.dotsRadius){
                this.ctx.beginPath();
                this.ctx.strokeStyle = this.averageColorStyles(i_dot, j_dot);
                this.ctx.moveTo(i_dot.x, i_dot.y);
                this.ctx.lineTo(j_dot.x, j_dot.y);
                this.ctx.stroke();
                this.ctx.closePath();
              }
            }
          }
        }
      },
      averageColorStyles(dot1, dot2) {
        var color1 = dot1.color,
            color2 = dot2.color;
        var r = this.mixComponents(color1.r, dot1.radius, color2.r, dot2.radius),
            g = this.mixComponents(color1.g, dot1.radius, color2.g, dot2.radius),
            b = this.mixComponents(color1.b, dot1.radius, color2.b, dot2.radius);
        return this.createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b));
      },
      mixComponents(comp1, weight1, comp2, weight2) {
        return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2);
      },
      colorValue(min) {
        return Math.floor(Math.random() * 255 + min);
      },
      createColorStyle(r,g,b) {
        return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)';
      },
      setColor(min) {
        min = min || 0;
        let r = this.colorValue(min);
        let g = this.colorValue(min);
        let b = this.colorValue(min);
        let colorObj = {
          r: r,
          g: g,
          b: b,
          style: this.createColorStyle(r, g,b)
        }
        return colorObj;

      },
      dotsMousemove(e){
        this.mousePosition.x = e.pageX;
        this.mousePosition.y = e.pageY;
      },
      dotsMouseleave(e){
        this.mousePosition.x = this.canvas.width / 2;
        this.mousePosition.y = this.canvas.height / 2;
      }
    },
    mounted() {
     window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
     this.canvas = document.getElementById('canvas');
     this.ctx = this.canvas.getContext('2d');
      this.canvas.width  = canvas.offsetWidth;
      this.canvas.height = canvas.offsetHeight;
      this.ctx.lineWidth = 0.3;
      this.ctx.strokeStyle = this.setColor(150).style;
      this.mousePosition = {
        x: 30 * this.canvas.width / 100,
        y: 30 * this.canvas.height / 100
      };
      this.createDots(this.dotsNb)
      requestAnimationFrame(this.animateDots)
    },
  }
</script>

<style>
  section {
  width: 100%;
    height: 100%;

  	background-image: -webkit-linear-gradient(top, #163284, #b76969);
  background-image: -moz-linear-gradient(top, #163284, #b76969);
  background-image: -ms-linear-gradient(top, #163284, #b76969);
  background-image: -o-linear-gradient(top, #163284, #b76969);
  background-image: linear-gradient(to bottom, #163284, #b76969);
    background-color: #1A1A1A;

  }

  canvas {
  z-index:1;
  position: fixed;
  width:95%;
  margin-left: 20px;
  margin-right: 20px;

  }
</style>
